<template>
    <div class="page" @click="closePop">
        <!-- header start-->
        <div class="header">
            <div class="logo">
                <img src="~assets/images/logo.png" alt="">
            </div>
            <div class="header-right">
                <span class="el-dropdown-link">
                    Destinations<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <span class="btn-text">Sign Up</span>
                <span class="btn-text">Log In</span>
            </div>
            <div class="nav-bar">
                <i class="icon-bar"><img src="~assets/images/nav-icon.svg" width="width" height="height" /></i>
            </div>
        </div>
        <!-- header end-->

        <!-- banner start -->
        <div class="banner">
            <div class="tab">
                <div class="item" :class="tabIndex == 0 ? 'active' : ''" @click="handleTab(0)">Casinos</div>
                <div class="item" :class="tabIndex == 1 ? 'active' : ''" @click="handleTab(1)">Customized</div>
            </div>
            <div class="tab-con" v-show="tabIndex == 0">
                <h1>Book your dream casino trip</h1>
                <h3>Search, compare and books world’s leading casinos.</h3>
                <div class="search-box">
                    <div class="inp-box">
                        <i class="icon icon-search">
                            <img src="~assets/images/icon-search.png" alt="">
                        </i>
                        <el-popover
                            placement="bottom-start"
                            style="width:100%"
                            trigger="manual"
                            :visible-arrow="false"
                            popper-class="select-wrap"
                            v-model="visible2"
                            >
                            <div class="select-con">
                                <div class="select-hd">Recent destinations</div>
                                <div class="item-list history-list">
                                    <div class="item" v-for="(item,index) in historyList" :key="index" @click="selectFn2(item.label)">
                                        <i class="icon icon-history"></i><span>{{item.label}}</span>
                                    </div>
                                </div>
                                <div class="select-hd">Popular destinations</div>
                                <div class="item-list">
                                    <div class="item" v-for="(item,index) in hotList" :key="index" @click="selectFn2(item.label)">
                                        <i class="icon icon-location"></i><span>{{item.label}}</span>
                                    </div>
                                </div>
                            </div>
                            <el-input placeholder="Where are you going?" v-model="form.location" slot="reference" @click.stop.native="handleVisible2"></el-input>
                        </el-popover>
                    </div>
                    <div class="inp-box">
                        <i class="icon icon-date">
                            <img src="~assets/images/icon-date.png" alt="">
                        </i>
                        <el-popover
                            placement="bottom-start"
                            style="width:100%"
                            trigger="manual"
                            :visible-arrow="false"
                            popper-class="select-date-wrap"
                            v-model="visible3"
                            >
                            <div class="select-date-con">
                                <div class="tabs">
                                    <div class="tab"  :class="dateType==0?'active':''" @click="handleDateType(0)">Select your dates</div>
                                    <div class="tab"  :class="dateType==1?'active':''" @click="handleDateType(1)"><span>New:</span> I’m flexible</div>
                                </div>
                                <div class="tab-con" v-if="dateType==0">
                                    <date-picker
                                        v-model="form.dates"
                                        type="daterange"
                                        @pick="confirmDateRange"
                                        popperClass="date-content"
                                        value-format="yyyy-MM-dd"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                    </date-picker>
                                    <div class="exact-dates">
                                        <div class="item active">Exact dates</div>
                                        <div class="item">± 1 day</div>
                                        <div class="item">± 2 days</div>
                                        <div class="item">± 3 days</div>
                                        <div class="item">± 7 days</div>
                                    </div>
                                </div>
                                <div class="tab-con" v-if="dateType==1">
                                    <div class="travel-type">
                                        <div class="type-hd">Travel for...</div>
                                        <div class="item-list">
                                            <div class="item">
                                                <div class="item-icon">
                                                    <img src="~assets/images/date-type-1.png" alt="">
                                                </div>
                                                <div class="item-text">A short weekend</div>
                                                <div class="item-desc">Fri-Sun</div>
                                                <div class="item-radio"></div>
                                            </div>
                                            <div class="item">
                                                <div class="item-icon">
                                                    <img src="~assets/images/date-type-2.png" alt="">
                                                </div>
                                                <div class="item-text">a long weekend</div>
                                                <div class="item-desc">Thu-Mon</div>
                                                <div class="item-radio"></div>
                                            </div>
                                            <div class="item active">
                                                <div class="item-icon">
                                                    <img src="~assets/images/date-type-3.png" alt="">
                                                </div>
                                                <div class="item-text">A week</div>
                                                <div class="item-desc">7 days</div>
                                                <div class="item-radio"></div>
                                            </div>
                                            <div class="item">
                                                <div class="item-icon">
                                                    <img src="~assets/images/date-type-4.png" alt="">
                                                </div>
                                                <div class="item-text">Two weeks</div>
                                                <div class="item-desc">14 days</div>
                                                <div class="item-radio"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="travel-month">
                                        <div class="type-hd">Travel in...</div>
                                        <div class="item-list">
                                            <div class="item">
                                                <div class="item-month">August</div>
                                                <div class="item-year">2023</div>
                                            </div>
                                            <div class="item">
                                                <div class="item-month">September</div>
                                                <div class="item-year">2023</div>
                                            </div>
                                            <div class="item active">
                                                <div class="item-month">October</div>
                                                <div class="item-year">2023</div>
                                            </div>
                                            <div class="item">
                                                <div class="item-month">November</div>
                                                <div class="item-year">2023</div>
                                            </div>
                                            <div class="item">
                                                <div class="item-month">December</div>
                                                <div class="item-year">2023</div>
                                            </div>
                                            <div class="item">
                                                <div class="item-month">January</div>
                                                <div class="item-year">2024</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <el-input placeholder="Add dates" v-model="form.date" slot="reference" @click.stop.native="handleVisible3"></el-input>
                        </el-popover>
                    </div>
                    <div class="inp-box">
                        <i class="icon icon-guest">
                            <img src="~assets/images/icon-guest.png" alt="">
                        </i>
                        <el-popover
                            placement="bottom-start"
                            style="width:100%"
                            trigger="manual"
                            :visible-arrow="false"
                            popper-class="select-guest-wrap"
                            v-model="visible4"
                            >
                            <div class="select-guest-con">
                                <div class="item-list">
                                    <div class="item" v-for="(item,index) in guestList" :key="index">
                                        <div class="item-con">
                                            <div class="item-title">{{item.label}}</div>
                                            <div class="item-desc">{{item.tips}}</div>
                                        </div>
                                        <el-input-number v-model="item.value" :min="0"></el-input-number>
                                    </div>
                                </div>
                            </div>
                            <el-input placeholder="Add guests" v-model="form.guests" slot="reference" @click.stop.native="handleVisible4"></el-input>
                        </el-popover>
                    </div>
                    <el-button type="primary" class="search-btn">Search</el-button>
                </div>
            </div>
            <div class="tab-con tab-2" v-show="tabIndex == 1">
                <h1>Customize your next casino trip</h1>
                <h3>The whole trip - tailored for you by travel expert.</h3>
                <div class="search-box">
                    <div class="inp-box">
                        <i class="icon icon-search">
                            <img src="~assets/images/icon-search.png" alt="">
                        </i>
                        <el-popover
                            placement="bottom-start"
                            style="width:100%"
                            trigger="manual"
                            :visible-arrow="false"
                            popper-class="select-wrap"
                            v-model="visible"
                            >
                            <div class="select-con">
                                <div class="select-hd">Recent destinations</div>
                                <div class="item-list history-list">
                                    <div class="item" v-for="(item,index) in historyList" :key="index" @click="selectFn(item.label)">
                                        <i class="icon icon-history"></i><span>{{item.label}}</span>
                                    </div>
                                </div>
                                <div class="select-hd">Popular destinations</div>
                                <div class="item-list">
                                    <div class="item" v-for="(item,index) in hotList" :key="index" @click="selectFn(item.label)">
                                        <i class="icon icon-location"></i><span>{{item.label}}</span>
                                    </div>
                                </div>
                            </div>
                            <el-input placeholder="Search country" v-model="form.location" slot="reference" @click.stop.native="visible = !visible"></el-input>
                        </el-popover>
                    </div>
                    <el-button type="primary" class="search-btn">Search</el-button>
                </div>
            </div>
            <div class="nav-type">
                <div class="item" @click="handleTab(0)" :class="tabIndex == 0 ? 'active' : ''">Casinos</div>
                <div class="item" @click="handleTab(1)" :class="tabIndex == 1 ? 'active' : ''">Concierge Trips</div>
            </div>
        </div>
        <!-- banner end -->

        <!-- hot start -->
        <div class="hot-box">
            <div class="box-hd">Trending Destinations</div>
            <div class="box-desc">Explore world-class casinos in your favorite destinations</div>
            <div class="list-wrap">
                <div class="item-list">
                    <div class="item">
                        <div class="item-pic">
                            <img src="~assets/images/temp/pic-1.png" alt="">
                        </div>
                        <div class="item-title">
                            Las Vegas, Nevada
                        </div>
                        <div class="item-address">
                            United States
                        </div>
                        <div class="item-num">
                            60+ Casinos
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-pic">
                            <img src="~assets/images/temp/pic-2.png" alt="">
                        </div>
                        <div class="item-title">
                            Macau
                        </div>
                        <div class="item-address">
                            China
                        </div>
                        <div class="item-num">
                            60+ Casinos
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-pic">
                            <img src="~assets/images/temp/pic-3.png" alt="">
                        </div>
                        <div class="item-title">
                            London
                        </div>
                        <div class="item-address">
                            United Kingdom
                        </div>
                        <div class="item-num">
                            60+ Casinos
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-pic">
                            <img src="~assets/images/temp/pic-4.png" alt="">
                        </div>
                        <div class="item-title">
                            Monte Carlo
                        </div>
                        <div class="item-address">
                            Monaco
                        </div>
                        <div class="item-num">
                            60+ Casinos
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- hot end -->

        <div class="flow-box">
            <div class="box-hd">How it works?</div>
            <div class="item-list">
                <div class="item">
                    <div class="item-pic">
                        <!-- <img src="~assets/images/temp/pic-4.png" alt=""> -->
                    </div>
                    <div class="item-title line-1">
                        Personalized Experience
                    </div>
                    <div class="item-desc line-2">
                        Pick your hotel, finalize your flight, and curate your casino-centric attractions.
                    </div>
                </div>
                <div class="item">
                    <div class="item-pic">
                        <!-- <img src="~assets/images/temp/pic-4.png" alt=""> -->
                    </div>
                    <div class="item-title line-1">
                        Exclusive Deals & Cashbacks
                    </div>
                    <div class="item-desc line-2">
                        Seize unbeatable offers and rewards that ensure maximized value for each trip.
                    </div>
                </div>
                <div class="item">
                    <div class="item-pic">
                        <!-- <img src="~assets/images/temp/pic-4.png" alt=""> -->
                    </div>
                    <div class="item-title line-1">
                        Rack Up & Use Your Points
                    </div>
                    <div class="item-desc line-2">
                        Amplify your Kenta status with every booking and trade in points for rewards and privileges.
                    </div>
                </div>
            </div>
        </div>

        <div class="adv-box">
            <div class="adv-text">
                Take the gamble out of your casino trip planning
            </div>
            <el-button class="adv-btn">Get a Travel Expert</el-button>
        </div>

        <div class="spec-box hot-box">
            <div class="box-hd">
                Featured Casinos
            </div>
            <div class="item-list">
                <div class="item">
                    <div class="item-pic">
                        <img src="~assets/images/temp/pic-5.png" alt="">
                        <i class="icon-mark"></i>
                    </div>
                    <div class="item-title line-1">
                        Bellagio Hotel & Casino
                    </div>
                    <div class="item-address">
                        Las Vegas, US
                    </div>
                    <div class="item-views">
                        <div class="item-1">
                            3K Reviews
                        </div>
                        <div class="item-2">
                            112K Reviews
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="item-pic">
                        <img src="~assets/images/temp/pic-6.png" alt="">
                        <i class="icon-mark"></i>
                    </div>
                    <div class="item-title line-1">
                        The Venetian
                    </div>
                    <div class="item-address">
                        Macau
                    </div>
                    <div class="item-views">
                        <div class="item-1">
                            3K Reviews
                        </div>
                        <div class="item-2">
                            112K Reviews
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="item-pic">
                        <img src="~assets/images/temp/pic-7.png" alt="">
                        <i class="icon-mark"></i>
                    </div>
                    <div class="item-title line-1">
                        Marina Bay Sands Casino
                    </div>
                    <div class="item-address">
                        Singapore
                    </div>
                    <div class="item-views">
                        <div class="item-1">
                            3K Reviews
                        </div>
                        <div class="item-2">
                            112K Reviews
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="item-pic">
                        <img src="~assets/images/temp/pic-8.png" alt="">
                        <i class="icon-mark"></i>
                    </div>
                    <div class="item-title line-1">
                        Casino de Monte-Carlo
                    </div>
                    <div class="item-address">
                        Monaco
                    </div>
                    <div class="item-views">
                        <div class="item-1">
                            3K Reviews
                        </div>
                        <div class="item-2">
                            112K Reviews
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="article-box">
            <div class="box-hd">Latest Reads</div>
            <div class="art-layout">
                <div class="art-left">
                    <div class="art-pic">
                        <img src="~assets/images/temp/pic-9.png" alt="">
                    </div>
                    <div class="art-content">
                        <div class="art-msg">
                            <span class="art-type">TRAVEL GUIDE</span>
                            <span class="art-time">06/10/2023</span>
                        </div>
                        <div class="art-title line-2">5 Must-Visit Casinos in Asia for an Unforgettable Gambling Experience
                        </div>
                        <div class="art-desc line-3">
                            The continent of Asia boasts a dynamic culture, breathtaking natural scenery, and mouth-watering
                            cuisine. However, it is not commonly known that it is also a haven for some of the finest
                            casinos in the world.
                        </div>
                    </div>
                </div>
                <div class="art-center">
                    <div class="item">
                        <div class="art-pic">
                            <img src="~assets/images/temp/pic-10.png" alt="">
                        </div>
                        <div class="art-content">
                            <div class="art-msg">
                                <span class="art-type type-2">BEGINNER TIPS</span>
                                <span class="art-time">24/09/2023</span>
                            </div>
                            <div class="art-title line-2">3 hottest trends in poker every player should know about</div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="art-pic">
                            <img src="~assets/images/temp/pic-11.png" alt="">
                        </div>
                        <div class="art-content">
                            <div class="art-msg">
                                <span class="art-type">TRAVEL GUIDE</span>
                                <span class="art-time">24/09/2023</span>
                            </div>
                            <div class="art-title">What is responsible gambling and how to gamble responsibly</div>
                        </div>
                    </div>
                </div>
                <div class="art-right">
                    <div class="art-hd">
                        LATEST ANNOUNCEMENTS
                    </div>
                    <div class="item-list">
                        <div class="item">
                            <div class="item-title line-1">Introducing Kenta's Enhanced Booking Process</div>
                            <div class="item-time">18/10/2023</div>
                            <div class="item-desc line-2">We're excited to unveil our revamped three-step booking journey!
                                Dive in, choose your hotel, lock in your flight, and ...</div>
                        </div>
                        <div class="item">
                            <div class="item-title line-1">Exclusive Deals Just Got Better with Kenta!</div>
                            <div class="item-time">12/10/2023</div>
                            <div class="item-desc line-2">Big news for our users! We've partnered with some of the world's
                                leading casinos and airlines to bring you ...</div>
                        </div>
                        <div class="item">
                            <div class="item-title line-1">Loyalty Has Its Perks: Launching the Points System!</div>
                            <div class="item-time">06/10/2023</div>
                            <div class="item-desc line-2">Loyalty should always be rewarded. Starting today, earn points
                                with each booking you make on Kenta! As you rack ...</div>
                        </div>
                        <div class="item">
                            <div class="item-title line-1">New Casino Destinations Now on Kenta!</div>
                            <div class="item-time">24/09/2023</div>
                            <div class="item-desc line-2">We're thrilled to announce the addition of new, exotic casino
                                destinations to our platform! From the glitz of Monaco to ...</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="subscribe-box">
            <div class="subscribe-tips">
                Stay Ahead with our Newsletter!
            </div>
            <div class="subscribe-desc">
                Get insights and offers delivered straight to your inbox.
            </div>
            <div class="subscribe-form">
                <div class="inp-box">
                    <i class="icon icon-email">
                        <img src="~assets/images/icon-email.png" alt="">
                    </i>
                    <el-input placeholder="Email Address"></el-input>
                </div>
                <el-button class="form-btn" type="primary">Subscribe</el-button>
            </div>
        </div>

        <div class="footer">
            <div class="footer-left">
                <div>
                    <div class="logo">
                        <img src="~assets/images/logo-white.png" alt="">
                    </div>
                    <div class="copyright">© All rights reserved. <br />Kent Tech LLC</div>
                </div>
                <div class="share">
                    <a href="">
                        <img src="~assets/images/logo-facebook.png" alt="">
                    </a>
                    <a href="">
                        <img src="~assets/images/logo-ins.png" alt="">
                    </a>
                    <a href="">
                        <img src="~assets/images/logo-x.png" alt="">
                    </a>
                    <a href="">
                        <img src="~assets/images/logo-in.png" alt="">
                    </a>
                </div>
            </div>
            <div class="footer-right">
                <div class="item-list">
                    <div class="item-hd">Company</div>
                    <div class="item">
                        <a href="">About Us</a>
                    </div>
                    <div class="item">
                        <a href="">Contact Us</a>
                    </div>
                    <div class="item">
                        <a href="">Travel Guides</a>
                    </div>
                    <div class="item">
                        <a href="">Privacy Policy</a>
                    </div>
                    <div class="item">
                        <a href="">Cookie Policy</a>
                    </div>
                    <div class="item">
                        <a href="">Terms & Conditions</a>
                    </div>
                    <div class="item">
                        <a href="">Sitemap</a>
                    </div>
                </div>
                <div class="item-list">
                    <div class="item-hd">Quick Links</div>
                    <div class="item">
                        <a href="">Concierge</a>
                    </div>
                    <div class="item">
                        <a href="">Affiliates</a>
                    </div>
                    <div class="item">
                        <a href="">Partners</a>
                    </div>
                    <div class="item">
                        <a href="">Submission</a>
                    </div>
                    <div class="item">
                        <a href="">Press</a>
                    </div>
                    <div class="item">
                        <a href="">Responsible Gambling</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
    name: 'IndexPage',
    data() {
        return {
            tabIndex: 0,
            visible:false,
            visible2:false,
            visible3:false,
            visible4:false,
            dateType:0,
            form:{
                location:'',
                date:'',
                guests:''
            },
            historyList:[{
                label:'Bucharest, Romania'
            }],
            hotList:[{
                label:'Las Vegas, US'
            },{
                label:'Macau, China'
            },{
                label:'London, UK'
            },{
                label:'Monte Carlo, Monaco'
            },{
                label:'Singapore'
            }],
            guestList:[{
                label:'Adults',
                tips:'Age 13+',
                value:0,
            },{
                label:'Children',
                tips:'Age 1 to 12',
                value:0,
            },{
                label:'Infants',
                tips:'Under 1',
                value:0,
            },{
                label:'Pets',
                tips:'An extra free may apply',
                value:0,
            }],
        }
    },
    mounted() {
    },
    methods: {
        handleTab(index) {
            this.tabIndex = index;
        },
        selectFn(val){
            this.form.location=val;
            this.visible=false;
        },
        handleVisible2(){
            this.visible2 = !this.visible2;
            this.visible=false;
            this.visible3=false;
            this.visible4=false;
        },
        handleVisible3(){
            this.visible3 = !this.visible3;
            this.visible=false;
            this.visible2=false;
            this.visible4=false;
        },
        handleVisible4(){
            this.visible4 = !this.visible4;
            this.visible=false;
            this.visible2=false;
            this.visible3=false;
        },
        selectFn2(val){
            this.form.location=val;
            this.visible2=false;
        },
        selectFn3(val){
            this.form.date=val;
            this.visible3=false;
        },
        handleDateType(type){
            this.dateType=type;
        },
        confirmDateRange(e){
            this.form.date=`${dayjs(e[0]).format('YYYY-MM-DD')}~${dayjs(e[1]).format('YYYY-MM-DD')}`
            this.visible3=false;
        },
        closePop(){
            this.visible=false;
            this.visible2=false;
            this.visible3=false;
            this.visible4=false;
        },
    }
}
</script>
<style lang="scss">
img {
    width: 100%;
    height: 100%;
}
.select-wrap{
    transform: translate(-.4rem,.1rem);
    width: 9.12rem;
    padding: 0;
    .popper__arrow{
        display: none;
    }
    .select-con{
        padding: .06rem 0;
        .select-hd{
            font-size: .12rem;
            font-weight: 400;
            height: .3rem;
            line-height: .3rem;
            padding: 0 .16rem;
        }
        .item-list{
            .item{
                cursor: pointer;
                height: .32rem;
                padding: 0 .16rem;
                line-height: .32rem;
                font-size: .12rem;
                display: flex;
                align-items: center;
                font-weight: 300;
                .icon{
                    width: .09rem;
                    height: .12rem;
                    margin-right: .08rem;
                    display: block;
                    background-size: 100%;
                }
                .icon-history{
                    width: .12rem;
                    height: .12rem;
                    background-image: url('~assets/images/icon-history.png');
                }
                .icon-location{
                    background-image: url('~assets/images/icon-location.png');
                }
            }
            .item:hover{
                background: rgba(255, 50, 99, 0.08);
            }
        }
    }
}
.header {
    height: .64rem;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: space-between;
    padding-right: 1.12rem;
    background: #FEFEFE;
    color: rgba(26, 26, 26, 0.60);
    font-weight: 500;

    .logo {
        margin-left: .32rem;
        height: .32rem;

        img {
            height: 100%;
        }
    }

    .btn-text {
        margin-left: .24rem;
        cursor: pointer;
        font-weight: 500;
    }

    .nav-bar {
        width: .88rem;
        height: .64rem;
        display: flex;
        right: 0;
        top: 0;
        align-items: center;
        justify-content: center;
        position: absolute;
        border-left: solid 1px #DADADA;

        .icon-bar {
            width: .32rem;
        }
    }
}

.banner {
    height: 4.80rem;
    background: url('~assets/images/banner-1.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    padding-top: 1.20rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;

    .tab {
        display: none;
    }

    h1 {
        font-family: Rubik;
        font-size: .56rem;
        text-align: center;
    }

    h3 {
        margin-top: .08rem;
        font-size: .20rem;
        text-align: center;
    }

    .search-box {
        margin-top: .24rem;
        display: flex;
        background: #FEFEFE;
        ;
        width: 9.12rem;
        height: .64rem;
        padding: .08rem;
        border-radius: .12rem;

        .inp-box {
            margin-right: .08rem;
            flex: 1;
            display: flex;
            padding-left: .16rem;
            align-items: center;
            border: 1px solid rgba(218, 218, 218, 0.60);
            background: #FEFEFE;
            border-radius: .08rem;

            .icon {
                width: .16rem;
                height: .16rem;
                display: block;
                flex-shrink: 0;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .inline-input{
                width: 100%;
            }
            .el-input__inner {
                height: .4rem;
                line-height: .4rem;
                border-radius: .08rem;
                border: none;
            }
        }

        .search-btn {
            width: 1.52rem;
            border-radius: .08rem;
            padding: .12rem .2rem;
            font-size: .14rem;
            flex-shrink: 0;
        }

        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder,
        input::placeholder,
        textarea::placeholder {
            color: #1A1A1A;
        }
    }

    .nav-type {
        margin-top: .24rem;
        border-radius: .40rem;
        border: 1px solid #FEFEFE;
        background: rgba(254, 254, 254, 0.08);
        backdrop-filter: blur(4px);

        .item {
            font-size: .16rem;
            font-weight: 500;
            height: .40rem;
            line-height: .40rem;
            text-align: center;
            padding: 0 .16rem;
            border-radius: .40rem;
            display: inline-block;
            cursor: pointer;
        }

        .item.active {
            color: #FF3263;
            background: #FEFEFE;
        }
    }
}

.box-hd {
    font-size: .32rem;
    text-align: center;
}

.box-desc {
    margin-top: .08rem;
    font-size: .20rem;
    text-align: center;
}

.hot-box {
    padding: .64rem .24rem;
    background: #FEFEFE;

    .item-list {
        margin-top: .40rem;
        display: flex;

        .item {
            flex: 1;
            width: 0;
            margin: 0 .08rem;

            .item-pic {
                height: 4rem;
                border-radius: .08rem;
                overflow: hidden;
            }

            .item-title {
                font-family: Rubik;
                margin-top: .16rem;
                color: rgba(26, 26, 26, 0.87);
                font-size: .20rem;
            }

            .item-address {
                position: relative;
                margin-top: .04rem;
                font-size: .14rem;
                color: rgba(26, 26, 26, 0.60);

                &::after {
                    content: '';
                    position: absolute;
                    left: 0;
                    bottom: -.08rem;
                    width: .40rem;
                    height: 1px;
                    background: rgba(26, 26, 26, 0.16);
                }
            }

            .item-num {
                margin-top: .18rem;
                font-size: .12rem;
            }
        }
    }
}

.flow-box {
    padding: .64rem .24rem;
    background: #f5f5f5;

    .item-list {
        margin-top: .40rem;
        display: flex;

        .item {
            flex: 1;
            margin: 0 .08rem;
            background: #FEFEFE;
            border-radius: .08rem;
            padding: .24rem .40rem;

            .item-pic {
                height: 2.40rem;
                background: rgba(218, 218, 218, 0.16);
            }

            .item-title {
                margin-top: .24rem;
                color: rgba(26, 26, 26, 0.87);
                font-weight: 500;
                font-size: .20rem;
                text-align: center;
            }

            .item-desc {
                margin-top: .08rem;
                text-align: center;
                color: rgba(26, 26, 26, 0.60);
                font-size: .16rem;
            }
        }
    }
}

.adv-box {
    width: 100%;
    height: 3.44rem;
    background: linear-gradient(110deg, #FF3263 36.89%, #EE2344 73.36%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .adv-text {
        width: 6.5rem;
        font-size: .56rem;
        text-align: center;
        color: #FEFEFE;
    }

    .adv-btn {
        margin-top: .24rem;
        width: 1.88rem;
        height: .48rem;
        padding: .12rem .2rem;
        font-size: .14rem;
        color: #FF3263;
    }
}

.spec-box {
    .box-hd {
        padding-left: .16rem;
        text-align: left;
    }

    .item-list {
        .item {
            .item-pic {
                position: relative;
                height: 2rem;

                .icon-mark {
                    display: block;
                    width: .32rem;
                    height: .32rem;
                    position: absolute;
                    right: .16rem;
                    top: .16rem;
                    background: url('~assets/images/icon-mark.png');
                    background-size: 100%;
                }
            }

            .item-views {
                margin-top: .16rem;

                .item-1 {
                    display: inline-block;
                    margin: .05rem 0;
                    margin-right: .24rem;
                    background: url('~assets/images/views-1.png');
                    background-repeat: no-repeat;
                    background-position: left center;
                    height: .2rem;
                    line-height: .2rem;
                    background-size: auto .2rem;
                    padding-left: .8rem;
                    font-size: .12rem;
                }

                .item-2 {
                    display: inline-block;
                    background: url('~assets/images/views-2.png');
                    background-repeat: no-repeat;
                    background-size: auto .16rem;
                    padding-left: .75rem;
                    height: .16rem;
                    line-height: .16rem;
                    background-position: left center;
                    font-size: .12rem;
                }
            }
        }
    }
}

.art-content {
    padding: .16rem;
    background: #fefefe;
    border-bottom-left-radius: .08rem;
    border-bottom-right-radius: .08rem;

    .art-msg {
        height: .2rem;
        display: flex;
        align-items: center;
    }

    .art-type {
        font-size: .12rem;
        padding: .04rem;
        border-radius: .02rem;
        background: #FFB800;
    }

    .art-type.type-2 {
        background: #3451FF;
        color: #fff;
    }

    .art-time {
        margin-left: .16rem;
        color: rgba(26, 26, 26, 0.60);
        font-size: .14rem;
    }

    .art-title {
        margin-top: .16rem;
        font-size: .2rem;
    }

    .art-desc {
        position: relative;
        padding-top: .16rem;
        color: rgba(26, 26, 26, 0.60);
        font-size: .14rem;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: .08rem;
            width: .4rem;
            height: 1px;
            background: rgba(26, 26, 26, 0.16);
        }
    }
}

.article-box {
    padding: .64rem .24rem;
    background: #f5f5f5;

    .box-hd {
        padding-left: .16rem;
        text-align: left;
    }

    .art-layout {
        margin-top: .24rem;
        display: flex;

        .art-left {
            height: 5.6rem;
            background: #fefefe;
            // width: 5.64rem;
            // flex-shrink: 0;
            border-bottom-left-radius: .08rem;
            border-bottom-right-radius: .08rem;

            .art-pic {
                height: 3.72rem;
                border-top-left-radius: .08rem;
                border-top-right-radius: .08rem;
                overflow: hidden;
            }

            .art-content {
                padding-top: .22rem;
            }
        }

        .art-center {
            width: 3.34rem;
            height: 5.6rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: .16rem;
            flex-shrink: 0;

            .art-pic {
                height: 1.6rem;
            }

            .art-title {
                margin-top: .08rem;
            }

            // .item+.item{
            //     margin-top: .24rem;
            // }
        }

        .art-right {
            flex: 1;
            height: 5.6rem;
            margin-left: .16rem;
            background: #fefefe;
            border-radius: .08rem;
            padding: .24rem .24rem;

            .art-hd {
                color: #3451FF;
                font-size: .2rem;
                padding-bottom: .16rem;
                border-bottom: solid 1px rgba(26, 26, 26, 0.16);
            }

            .item-list {
                .item {
                    padding: .16rem 0;
                    border-bottom: solid 1px rgba(26, 26, 26, 0.16);

                    .item-title {
                        color: rgba(26, 26, 26, 0.87);
                        font-family: Rubik;
                        font-size: .16rem;
                    }

                    .item-time {
                        margin-top: 2px;
                        font-size: .14rem;
                        color: rgba(26, 26, 26, 0.60);
                    }

                    .item-desc {
                        position: relative;
                        font-size: .14rem;
                        padding-top: .16rem;
                        color: rgba(26, 26, 26, 0.60);

                        &::before {
                            content: '';
                            position: absolute;
                            left: 0;
                            top: .08rem;
                            width: .4rem;
                            height: 1px;
                            background: rgba(26, 26, 26, 0.16);
                        }
                    }
                }
            }
        }
    }
}

.subscribe-box {
    height: 3.04rem;
    background: #fefefe;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .subscribe-tips {
        font-size: .56rem;
    }

    .subscribe-desc {
        margin-top: .08rem;
        font-size: .2rem;
    }

    .subscribe-form {
        width: 4.48rem;
        margin-top: .32rem;
        display: flex;
        padding: .08rem;
        border-radius: .08rem;
        border: 1px solid rgba(218, 218, 218, 0.60);

        .form-btn {
            border-radius: 0.08rem;
            padding: 0.12rem 0.2rem;
        }

        .inp-box {
            margin-right: .08rem;
            flex: 1;
            display: flex;
            padding-left: .16rem;
            align-items: center;
            border: 1px solid rgba(218, 218, 218, 0.60);
            background: #FEFEFE;
            border-radius: .08rem;

            .icon {
                width: .16rem;
                height: .16rem;
                display: block;
                flex-shrink: 0;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .el-input__inner {
                height: .4rem;
                line-height: .4rem;
                border-radius: .08rem;
                border: none;
            }
        }

        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder,
        input::placeholder,
        textarea::placeholder {
            color: #1A1A1A;
        }
    }
}

.footer {
    background: #1A1A1A;
    padding: .64rem .32rem;
    display: flex;

    .footer-left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .logo {
            width: .76rem;
        }

        .copyright {
            margin-top: .16rem;
            color: rgba(254, 254, 254, 0.60);
            font-size: .14rem;
        }

        flex: 1;

        .share a {
            display: inline-block;
            width: .4rem;
            height: .4rem;
            margin-left: .1rem;
        }
    }

    .footer-right {
        width: 6rem;
        display: flex;

        .item-list {
            flex: 1;

            .item-hd {
                color: #FEFEFE;
                font-family: Rubik;
                font-size: .2rem;
                margin-bottom: .24rem;
            }

            .item {
                margin-top: .16rem;
            }

            .item a {
                color: rgba(254, 254, 254, 0.60);
                font-family: Rubik;
                font-size: .14rem;
                text-decoration: none;
            }

            .item a:hover {
                text-decoration: underline;
            }
        }
    }
}

.mobile {
    .page {
        width: 3.75rem;
        overflow: hidden;
    }

    .header {
        height: .48rem;

        .logo {
            height: .24rem;
        }

        .header-right {
            display: none;
        }

        .nav-bar {
            border-left: none;
            width: .56rem;
            height: .48rem;

            .icon-bar {
                width: .2rem;
            }
        }
    }

    .banner {
        display: block;
        padding-top: 0;
        height: 6.64rem;
        background: url('~assets/images/banner-2.png') no-repeat center bottom;
        background-size: 100% 3.93rem;

        .tab {
            display: flex;
            width: 100%;

            .item {
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex: 1;
                height: .4rem;
                color: rgba(26, 26, 26, 0.40);
                font-size: .14rem;
                border: 1px solid #DADADA;
                background: #F5F5F5;
            }

            .item.active {
                position: relative;
                border-color: transparent;
                background: #fefefe;
            }

            .item.active::before {
                content: '';
                position: absolute;
                box-sizing: content-box;
                padding: 0 1px;
                top: -1px;
                left: -1px;
                width: 100%;
                height: 2px;
                background: #FF3263;
            }
        }

        .tab-con {
            padding: .24rem .1rem .16rem .1rem;
            width: 100%;
            background: #fefefe;
            border-bottom-left-radius: .2rem;
            border-bottom-right-radius: .2rem;
        }

        .tab-con.tab-2 {
            h1 {
                padding: 0 .6rem;
            }

            h3 {
                display: block;
                color: #1A1A1A;
                font-size: .14rem;
            }
        }

        h1 {
            padding: 0 .7rem;
            font-size: .24rem;
            color: #1A1A1A;
        }

        h3 {
            display: none;
            color: #1A1A1A;
            font-size: .14rem;
        }

        .nav-type {
            display: none;
        }
    }

    .search-box {
        // display: none;
        display: block;
        height: auto;
        width: 100%;
        margin-top: .1rem;

        .inp-box {
            margin-top: .08rem;
        }

        .search-btn {
            margin-top: .16rem;
            width: 100%;
        }
    }

    .box-hd {
        font-size: .24rem;
    }

    .box-desc {
        font-size: .16rem;
    }

    .hot-box {
        padding: .64rem .2rem;

        .list-wrap {
            width: 100%;
            overflow: auto;
        }

        .item-list {
            width: 10.56rem;
            display: block;
            margin-top: .24rem;

            .item {
                width: 2.48rem;
                float: left;

                .item-pic {
                    height: 3rem;
                    border-radius: .06rem;
                }
            }
        }
    }

    .flow-box {
        padding: .64rem .2rem;

        .item-list {
            display: block;

            .item {
                margin: .16rem 0 0;
                padding: .16rem;

                .item-title {
                    font-size: .18rem;
                }

                .item-desc {
                    font-size: .14rem;
                }
            }
        }
    }

    .adv-box {
        .adv-text {
            width: 3.36rem;
            font-size: .38rem;
        }
    }

    .spec-box {
        .box-hd {
            padding-left: 0;
        }

        .item-list {
            width: 100%;

            .item {
                float: none;
                margin: 0;
                width: 100%;
                margin-top: .24rem;
                padding-bottom: .24rem;
                border-bottom: solid 1px rgba(26, 26, 26, 0.16);
                ;

                .item-pic {
                    height: 2rem;
                }
            }
        }
    }

    .article-box {
        padding: .64rem .2rem;

        .box-hd {
            padding-left: 0;
        }

        .art-layout {
            margin-top: .16rem;
            display: block;

            .art-left {
                height: auto;

                .art-pic {
                    height: 2.24rem;
                }
            }

            .art-center {
                width: auto;
                height: auto;
                margin-left: 0;

                .item {
                    margin-top: .24rem;
                }
            }

            .art-content {
                .art-title {
                    font-size: .18rem;
                }

                .art-desc {
                    overflow: visible;
                    -webkit-line-clamp: unset;
                }
            }

            .art-right {
                height: auto;
                margin-left: 0;
                margin-top: .24rem;
            }
        }
    }

    .subscribe-box {
        text-align: center;
        height: auto;
        padding: 1.2rem .2rem;

        .subscribe-tips {
            // padding: 0 .16rem;
            font-size: .4rem;
        }

        .subscribe-desc {
            padding: 0 .4rem;
            font-size: .16rem;
        }

        .subscribe-form {
            width: 100%;
            flex-direction: column;

            .inp-box {
                margin-right: 0;
            }

            .el-button {
                margin-top: .08rem;
            }
        }
    }

    .footer {
        padding: 0.64rem .2rem .24rem;
        flex-direction: column-reverse;

        // position: relative;
        .footer-left {
            // position: absolute;
            margin-top: .4rem;
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            left: 0;
            bottom: 0;

            .share {
                a {
                    width: .24rem;
                    height: .24rem;
                    margin-left: .08rem;
                }
            }
        }

        .footer-right {
            justify-content: space-between;
            width: 100%;

            .item-list {
                flex: none;
            }
        }
    }
}
.exact-dates{
    display: flex;
    align-items: center;
    .item{
        color: rgba(26, 26, 26, 0.60);
        font-size: .14rem;
        padding: 0 .08rem;
        border-radius: .04rem;
        height: .32rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: .08rem;
        border: 1px solid rgba(218, 218, 218, 0.60);
    }
    .item.active{
        color: #FF3263;
        border: 1px solid #FF3263;
        background: rgba(255, 50, 99, 0.16);
    }
}

.travel-type{
    .type-hd{
        font-size: .2rem;
        font-weight: 400;
    }
    .item-list{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: .16rem;
        .item+.item{
            margin-left: .32rem;
        }
        .item.active{
            border: 1px solid #FF3263;
            background: rgba(255, 50, 99, 0.08);
            .item-text{
                color: #FF3263;
            }
            .item-radio{
                position: relative;
                border-color: #1A1A1A;
            }
            .item-radio::after{
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                content: '';
                width: .08rem;
                height: .08rem;
                background: #FF3263;
                border-radius: 50%;
            }
        }
        .item:hover{
            border: 1px solid #FF3263;
            background: rgba(255, 50, 99, 0.08);
            .item-text{
                color: #FF3263;
            }
        }
        .item{
            height: 1.6rem;
            width: 1.6rem;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 8px;
            border: 1px solid #DADADA;
            cursor: pointer;
            .item-icon{
                height: .56rem;
            }
            .item-text{
                margin-top: .08rem;
                font-size: .14rem;
                font-weight: 500;
            }
            .item-desc{
                margin-top: .08rem;
                font-size: .14rem;
            }
            .item-radio{
                width: .16rem;
                height: .16rem;
                margin-top: .08rem;
                border-radius: 50%;
                border: solid 1px #DADADA;
            }
        }
    }
}
.travel-month{
    margin-top: .24rem;
    .type-hd{
        font-size: .2rem;
        font-weight: 400;
    }
    .item-list{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: .16rem;
        .item{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 8px;
            border: 1px solid #DADADA;
            flex: 1;
            height: 1.2rem;
            cursor: pointer;
            .item-month{
                font-size: .14rem;
                font-weight: 500;
            }
            .item-year{
                margin-top: .08rem;
                font-size: .14rem;
            }
        }
        .item.active{
            border: 1px solid #FF3263;
            background: rgba(255, 50, 99, 0.08);
            .item-month{
                color: #FF3263;
            }
        }
        .item:hover{
            border: 1px solid #FF3263;
            background: rgba(255, 50, 99, 0.08);
            .item-month{
                color: #FF3263;
            }
        }
        .item+.item{
            margin-left: .25rem;
        }
    }
}
</style>